<template>
	<view style="padding-bottom: 130rpx;">

		<uni-section title="费用补录" type="line">
			<view class="formInfo">
				<uni-forms ref="form">
					<uni-forms-item label="费用名称" required>
						<u--input v-model="formData.costName" placeholder="请输入费用项名称"></u--input>
					</uni-forms-item>

					<uni-forms-item label="支付金额" required>
						<u--input v-model="formData.paidAmount" @input="check" type="digit"
							placeholder="请输入支付金额"></u--input>
					</uni-forms-item>
					<uni-forms-item label="支付方式" required>
						<view @click="showPayWay=true">
							<u--input v-model="formData.payWayStr" disabled disabledColor="#fff" placeholder="请选择收款方式"
								suffixIcon="arrow-right">
							</u--input>
						</view>
					</uni-forms-item>
					<uni-forms-item label="费用类型" required>
						<uni-data-checkbox v-model="formData.billType" :localdata="billTypes" />
					</uni-forms-item>

					<uni-forms-item label="支付时间" required>
						<uni-datetime-picker type="datetime" v-model="formData.paidTime" @change="changeTime()" />
					</uni-forms-item>

					<uni-forms-item label="经办人" required>
						<u--input v-model="formData.operator" placeholder="自动带出可修改"></u--input>
					</uni-forms-item>

					<uni-forms-item label="备注">
						<u--textarea v-model="formData.remark" count placeholder="请输入200字内的说明" maxlength="200">
						</u--textarea>
					</uni-forms-item>

					<uni-forms-item label="支付凭证">
						<sr-upload maxCount="1" @uploadResult="payDocument"></sr-upload>
					</uni-forms-item>
					
				

				</uni-forms>
			</view>
		</uni-section>

		<!-- 付款方式 -->
		<u-picker :show="showPayWay" :columns="sysPayWay" keyName="name" closeOnClickOverlay @close="showPayWay = false"
			@cancel="showPayWay = false" title="支付方式" confirmColor="#1573FF" @confirm="confimPayWay"></u-picker>

		<button type="info" class="sub-btn" @click="confimSave">保存</button>
	</view>

</template>

<script>
	import srUpload from '@/components/upload/sr-upload.vue';
	import * as orderApi from '@/api/order-api.js';
	var moment = require('@/utils/moment.js');
	export default {
		components: {
			srUpload,
		},
		data() {
			return {
				billTypes: [{
						value: 1,
						text: '收入'
					},
					{
						value: 2,
						text: '支出'
					}
				],
				showPayWay: false,
				sysPayWay: [this.$store.state.initData.initData.sysPayWay],
				orderNo: '',
				formData: {
					operator: this.$store.state.user.userInfo.name, //	经办人
					paidAmount: '', //收款金额
					paidTime: this.parseTime(new Date()), //支付时间
					payWay: 1, //	支付方式
					payWayStr: '微信', //支付方式str
					costName: '', //收费项
					remark: '', //备注
					url: '',
					bizNo: '',
					billType:1,
				},
				key: '',
			};
		},
		onLoad(op) {
			this.orderNo = op.orderNo;
			this.formData.bizNo = this.orderNo;
		},
		methods: {
			check(e) {
				//正则表达试
				e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					this.formData.paidAmount = e;
				})
			},

			// 支付时间
			changeTime(e) {
				this.formData.time = e;
			},
			// 支付方式
			confimPayWay(e) {
				this.formData.payWay = e.value[0].id;
				this.formData.payWayStr = e.value[0].name;
				this.showPayWay = !this.showPayWay;
			},
			// 支付凭证
			payDocument(data) {
				this.formData.url = data[0];
			},
			// 确认保存
			confimSave() {
				if (uni.$u.test.isEmpty(this.formData.costName)) {
					uni.$u.toast('请输入费用项名称');
					return
				} else if (uni.$u.test.isEmpty(this.formData.paidAmount)) {
					uni.$u.toast('请输入支付金额');
					return
				} else if (uni.$u.test.isEmpty(this.formData.payWay)) {
					uni.$u.toast('请选择支付方式');
					return
				} else if (uni.$u.test.isEmpty(this.formData.paidTime)) {
					uni.$u.toast('请选择支付时间');
					return
				} else if (uni.$u.test.isEmpty(this.formData.operator)) {
					uni.$u.toast('请输入经办人');
					return
				} else {
					orderApi.supplementaryExpenses(
						[this.formData]
					).then(res => {
						uni.$emit("refreshOrder");
						this.$u.toast('保存成功')
						uni.navigateBack({
							animationDuration: 300
						})
					})
				}
			},

			// 日期格式化
			parseTime(time, pattern) {
				if (arguments.length === 0 || !time) {
					return null;
				}
				const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
				let date;
				if (typeof time === 'object') {
					date = time;
				} else {
					if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
						time = parseInt(time);
					} else if (typeof time === 'string') {
						time = time
							.replace(new RegExp(/-/gm), '/')
							.replace('T', ' ')
							.replace(new RegExp(/\.[\d]{3}/gm), '');
					}
					if (typeof time === 'number' && time.toString().length === 10) {
						time = time * 1000;
					}
					date = new Date(time);
				}
				const formatObj = {
					y: date.getFullYear(),
					m: date.getMonth() + 1,
					d: date.getDate(),
					h: date.getHours(),
					i: date.getMinutes(),
					s: date.getSeconds(),
					a: date.getDay()
				};
				const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
					let value = formatObj[key];
					// Note: getDay() returns 0 on Sunday
					if (key === 'a') {
						return ['日', '一', '二', '三', '四', '五', '六'][value];
					}
					if (result.length > 0 && value < 10) {
						value = '0' + value;
					}
					return value || 0;
				});
				return time_str;
			}

		}

	};
</script>

<style scpod="scpod" lang="scss">
	.formInfo {
		margin: 20rpx;
		padding: 20rpx 30rpx;
		background: #ffffff;
		border-radius: 18rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}

	.payItem {
		padding: 12rpx 0;
		color: #666;
		font-size: 28rpx;
	}

	.commitBtn {
		background-color: #1673ff;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		width: 300rpx;
		margin-top: 30rpx;
	}
</style>